<template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
      <h2 class="text-2xl font-bold">魂魄详情</h2>
      <div class="flex gap-2">
        <button class="btn btn-outline" @click="router.back()">返回</button>
        <button class="btn btn-primary" @click="handleEdit" v-if="!isEdit">编辑</button>
        <template v-else>
          <button class="btn btn-primary" @click="handleSave">保存</button>
          <button class="btn btn-outline" @click="handleCancel">取消</button>
        </template>
      </div>
    </div>

    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <form class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="form-control">
              <label class="label">姓名</label>
              <input
                v-model="form.name"
                type="text"
                class="input input-bordered"
                :disabled="!isEdit"
              />
            </div>
            <div class="form-control">
              <label class="label">年龄</label>
              <input
                v-model="form.age"
                type="number"
                class="input input-bordered"
                :disabled="!isEdit"
              />
            </div>
            <div class="form-control">
              <label class="label">阳寿状态</label>
              <select v-model="form.lifeStatus" class="select select-bordered" :disabled="!isEdit">
                <option :value="true">阳寿已尽</option>
                <option :value="false">阳寿未尽</option>
              </select>
            </div>
            <div class="form-control">
              <label class="label">勾魂状态</label>
              <select v-model="form.soulStatus" class="select select-bordered" :disabled="!isEdit">
                <option value="0">未勾魂</option>
                <option value="1">已勾魂</option>
                <option value="2">勾魂中</option>
              </select>
            </div>
            <div class="form-control">
              <label class="label">生辰八字</label>
              <input
                v-model="form.birthTime"
                type="text"
                class="input input-bordered"
                :disabled="!isEdit"
              />
            </div>
            <div class="form-control">
              <label class="label">功德值</label>
              <input
                v-model="form.merit"
                type="number"
                class="input input-bordered"
                :disabled="!isEdit"
              />
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- 相关记录 -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h3 class="card-title">相关记录</h3>
        <div class="tabs">
          <a
            class="tab tab-bordered"
            :class="{ 'tab-active': activeTab === 'judgment' }"
            @click="activeTab = 'judgment'"
          >
            审判记录
          </a>
          <a
            class="tab tab-bordered"
            :class="{ 'tab-active': activeTab === 'hell' }"
            @click="activeTab = 'hell'"
          >
            地狱记录
          </a>
          <a
            class="tab tab-bordered"
            :class="{ 'tab-active': activeTab === 'reincarnation' }"
            @click="activeTab = 'reincarnation'"
          >
            轮回记录
          </a>
        </div>

        <div class="overflow-x-auto mt-4">
          <!-- 审判记录 -->
          <table v-if="activeTab === 'judgment'" class="table">
            <thead>
              <tr>
                <th>案件编号</th>
                <th>审判状态</th>
                <th>判决结果</th>
                <th>审判官</th>
                <th>审判时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="record in judgmentRecords" :key="record.id">
                <td>{{ record.caseNumber }}</td>
                <td>
                  <div :class="getStatusBadgeClass(record.status)">
                    {{ getStatusText(record.status) }}
                  </div>
                </td>
                <td>
                  <div :class="getJudgmentBadgeClass(record.judgment)">
                    {{ getJudgmentText(record.judgment) }}
                  </div>
                </td>
                <td>{{ record.judge }}</td>
                <td>{{ record.judgmentTime }}</td>
              </tr>
            </tbody>
          </table>

          <!-- 地狱记录 -->
          <table v-if="activeTab === 'hell'" class="table">
            <thead>
              <tr>
                <th>地狱层数</th>
                <th>罪孽</th>
                <th>刑期</th>
                <th>受刑状态</th>
                <th>剩余时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="record in hellRecords" :key="record.id">
                <td>{{ record.hellName }}</td>
                <td>
                  <div class="tooltip" :data-tip="record.sins.join('\\n')">
                    {{ record.sins.length }}项
                  </div>
                </td>
                <td>{{ record.punishmentTime }}</td>
                <td>
                  <div :class="getHellStatusBadgeClass(record.status)">
                    {{ getHellStatusText(record.status) }}
                  </div>
                </td>
                <td>{{ record.remainingTime }}</td>
              </tr>
            </tbody>
          </table>

          <!-- 轮回记录 -->
          <table v-if="activeTab === 'reincarnation'" class="table">
            <thead>
              <tr>
                <th>轮回编号</th>
                <th>投胎类别</th>
                <th>轮回状态</th>
                <th>新生信息</th>
                <th>轮回时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="record in reincarnationRecords" :key="record.id">
                <td>{{ record.reincarnationNumber }}</td>
                <td>
                  <div :class="getReincarnationTypeBadgeClass(record.type)">
                    {{ getReincarnationTypeText(record.type) }}
                  </div>
                </td>
                <td>
                  <div :class="getReincarnationStatusBadgeClass(record.status)">
                    {{ getReincarnationStatusText(record.status) }}
                  </div>
                </td>
                <td>
                  <div
                    v-if="record.newLifeDetails"
                    class="tooltip"
                    :data-tip="record.newLifeDetails"
                  >
                    查看详情
                  </div>
                  <div v-else>-</div>
                </td>
                <td>{{ record.reincarnationTime }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getSoulById, updateSoul } from '@/api/modules/souls'
import type { Soul } from '@/types/api'

const router = useRouter()
const route = useRoute()
const isEdit = ref(false)
const activeTab = ref('judgment')

const form = reactive<Soul>({
  id: 0,
  name: '',
  age: 0,
  lifeStatus: false,
  soulStatus: 0,
  birthTime: '',
  merit: 0,
})

// 模拟数据
const judgmentRecords = [
  {
    id: 1,
    caseNumber: 'AJ202403150001',
    status: 2,
    judgment: 2,
    judge: '判官A',
    judgmentTime: '2024-03-15 10:00:00',
  },
]

const hellRecords = [
  {
    id: 1,
    hellName: '刀山地狱',
    sins: ['杀生', '偷盗'],
    punishmentTime: '108年',
    status: 1,
    remainingTime: '87年',
  },
]

const reincarnationRecords = [
  {
    id: 1,
    reincarnationNumber: 'LH202403150001',
    type: 1,
    status: 2,
    newLifeDetails: '新生父母：陈某某、周某某\\n出生地点：北京市朝阳区\\n预产期：2024年6月15日',
    reincarnationTime: '2024-03-15 15:00:00',
  },
]

onMounted(async () => {
  const id = Number(route.params.id)
  if (id) {
    const data = await getSoulById(id)
    Object.assign(form, data)
  }
})

const handleEdit = () => {
  isEdit.value = true
}

const handleSave = async () => {
  await updateSoul(form.id, form)
  isEdit.value = false
}

const handleCancel = () => {
  isEdit.value = false
}

// 状态样式函数
const getStatusBadgeClass = (status: number) => {
  switch (status) {
    case 0:
      return 'badge badge-ghost'
    case 1:
      return 'badge badge-warning'
    case 2:
      return 'badge badge-success'
    default:
      return 'badge'
  }
}

const getStatusText = (status: number) => {
  switch (status) {
    case 0:
      return '待审判'
    case 1:
      return '审判中'
    case 2:
      return '已审判'
    default:
      return '未知'
  }
}

const getJudgmentBadgeClass = (judgment: number | null) => {
  if (judgment === null) return 'badge badge-ghost'
  switch (judgment) {
    case 1:
      return 'badge badge-success'
    case 2:
      return 'badge badge-error'
    case 3:
      return 'badge badge-info'
    default:
      return 'badge'
  }
}

const getJudgmentText = (judgment: number | null) => {
  if (judgment === null) return '未判决'
  switch (judgment) {
    case 1:
      return '转世重生'
    case 2:
      return '地狱受刑'
    case 3:
      return '超度往生'
    default:
      return '未知'
  }
}

const getHellStatusBadgeClass = (status: number) => {
  switch (status) {
    case 0:
      return 'badge badge-ghost'
    case 1:
      return 'badge badge-warning'
    case 2:
      return 'badge badge-success'
    default:
      return 'badge'
  }
}

const getHellStatusText = (status: number) => {
  switch (status) {
    case 0:
      return '待受刑'
    case 1:
      return '受刑中'
    case 2:
      return '刑满'
    default:
      return '未知'
  }
}

const getReincarnationTypeBadgeClass = (type: number | null) => {
  if (type === null) return 'badge badge-ghost'
  switch (type) {
    case 1:
      return 'badge badge-primary'
    case 2:
      return 'badge badge-secondary'
    case 3:
      return 'badge badge-accent'
    case 4:
      return 'badge badge-error'
    default:
      return 'badge'
  }
}

const getReincarnationTypeText = (type: number | null) => {
  if (type === null) return '未安排'
  switch (type) {
    case 1:
      return '人道'
    case 2:
      return '天道'
    case 3:
      return '畜生道'
    case 4:
      return '饿鬼道'
    default:
      return '未知'
  }
}

const getReincarnationStatusBadgeClass = (status: number) => {
  switch (status) {
    case 0:
      return 'badge badge-ghost'
    case 1:
      return 'badge badge-warning'
    case 2:
      return 'badge badge-success'
    default:
      return 'badge'
  }
}

const getReincarnationStatusText = (status: number) => {
  switch (status) {
    case 0:
      return '待轮回'
    case 1:
      return '轮回中'
    case 2:
      return '已转世'
    default:
      return '未知'
  }
}
</script>
